<template>
  <div class="losepet">
    <h2 class="title">丢失信息</h2>
    <!-- 查询框部分 -->
    <div class="filters">
      <input v-model="searchQuery" type="text" placeholder="搜索丢失信息..." />
      <div class="filters-dropdown">
        <label for="type-select">种类：</label>
        <select v-model="selectedType" id="type-select">
          <option value="">全部</option><option value="狗">狗</option><option value="猫">猫</option><option value="其它">其它</option>
        </select>
      </div>
      <div v-if="selectedType === '猫'" class="filters-dropdown">
        <label for="cat-breed-select">猫的品种：</label>
        <select v-model="selectedCatBreed" id="cat-breed-select">
          <option value="">全部</option>
          <option value="蓝白">蓝白</option><option value="蓝猫">蓝猫</option><option value="纯白">纯白</option><option value="虎斑">虎斑</option><option value="加白">加白</option>
          <option value="橘猫">橘猫</option><option value="黑猫">黑猫</option><option value="白猫">白猫</option><option value="布偶">布偶</option><option value="缅因">缅因</option>
          <option value="豹猫">豹猫</option><option value="金渐层">金渐层</option><option value="银渐层">银渐层</option><option value="狸花猫">狸花猫</option><option value="奶牛猫">奶牛猫</option>
          <option value="三花猫">三花猫</option><option value="波斯猫">波斯猫</option><option value="金吉拉">金吉拉</option><option value="拿破仑">拿破仑</option><option value="无毛猫">无毛猫</option>
          <option value="矮脚猫">矮脚猫</option><option value="暹罗猫">暹罗猫</option><option value="德文卷毛">德文卷毛</option><option value="美国卷耳">美国卷耳</option><option value="挪威森林">挪威森林</option>
          <option value="其它">其它</option>
        </select>
      </div>
      <div v-if="selectedType === '狗'" class="filters-dropdown">
        <label for="dog-breed-select">狗的品种：</label>
        <select v-model="selectedDogBreed" id="dog-breed-select">
          <option value="">全部</option>
          <option value="比熊">比熊</option><option value="泰迪">泰迪</option><option value="博美">博美</option><option value="柴犬">柴犬</option><option value="柯基">柯基</option>
          <option value="金毛">金毛</option><option value="边牧">边牧</option><option value="松狮">松狮</option><option value="巴哥">巴哥</option><option value="德牧">德牧</option>
          <option value="法斗">法斗</option><option value="西高地">西高地</option><option value="哈士奇">哈士奇</option><option value="蝴蝶犬">蝴蝶犬</option><option value="约克夏">约克夏</option>
          <option value="萨摩耶">萨摩耶</option><option value="雪纳瑞">雪纳瑞</option><option value="马尔济斯">马尔济斯</option><option value="拉布拉多">拉布拉多</option><option value="阿拉斯加">阿拉斯加</option>
          <option value="其它">其它</option>
        </select>
      </div>
      <div v-if="selectedType === '其它'" class="filters-dropdown">
        <label for="dog-breed-select">其它动物：</label>
        <select v-model="selectedOtherBreed" id="dog-breed-select">
          <option value="">全部</option>
          <option value="兔">兔</option><option value="仓鼠">仓鼠</option><option value="鹦鹉">鹦鹉</option><option value="龙猫">龙猫</option><option value="刺猬">刺猬</option>
          <option value="鸭">鸭</option><option value="小香猪">小香猪</option><option value="其它">其它</option>
        </select>
      </div>
      <div class="filters-dropdown">
        <label for="location-select">地区：</label>
        <select v-model="selectedLocation" id="location-select">
          <option value="">全部</option>
          <option value="北京">北京</option><option value="天津">天津</option><option value="上海">上海</option><option value="重庆">重庆</option>
          <option value="江苏">江苏</option><option value="浙江">浙江</option><option value="江西">江西</option><option value="黑龙江">黑龙江</option><option value="新疆">新疆</option>
          <option value="香港">香港</option><option value="澳门">澳门</option><option value="广东">广东</option><option value="广西">广西</option>
          <option value="湖南">湖南</option><option value="湖北">湖北</option><option value="辽宁">辽宁</option><option value="宁夏">宁夏</option>
          <option value="河南">河南</option><option value="河北">河北</option><option value="山东">山东</option><option value="山西">山西</option>
          <option value="内蒙古">内蒙古</option><option value="吉林">河北</option><option value="安徽">安徽</option>
          <option value="青海">青海</option><option value="甘肃">甘肃</option><option value="陕西">陕西</option>
          <option value="福建">福建</option><option value="海南">海南</option><option value="台湾">台湾</option><option value="海外">海外</option>
        </select>
      </div>
    </div>
    <div v-if="filteredPets.length === 0" class="no-pets">
      <p>目前没有符合条件的走失宠物。</p>
    </div>
    <!-- 展示宠物信息 -->
    <div v-else class="pet-card" v-for="pet in filteredPets" :key="pet.id">
      <div class="pet-card-header">
        <h3>{{ pet.lossname }}</h3>
        <span class="pet-type">{{ pet.losstype}}</span>
      </div>
      <div class="pet-card-body">
        <p><strong>地区：</strong>{{ pet.lostarea }}</p>
        <p><strong>地点：</strong>{{ pet.lostlocation}}</p>
        <p><strong>品种：</strong>{{ pet.breed || '未知' }}</p>
        <p><strong>描述：</strong>{{ pet.lossdescription }}</p>
        <p><strong>发布人：</strong>{{ pet.publisher }}</p>
        <p><strong>联系方式：</strong>{{ pet.contact }}</p>
      </div>
    </div>
    <!-- 新增信息模态框 -->
    <div v-if="showAddModal" class="modal">
      <div class="modal-content">
        <h3>新增丢失信息</h3>
        <label for="name">宠物名:</label>
        <input v-model="newPetsData.name" id="name" type="text" />
        <label for="type">宠物种类:</label>
        <select v-model="newPetsData.type" id="type">
          <option value="狗">狗</option>
          <option value="猫">猫</option>
          <option value="其它">其它</option>
        </select>
        <label for="breed" >宠物品种:</label>
        <select v-model="newPetsData.breed" id="breed" >
          <option v-for="breed in filteredBreeds" :key="breed" :value="breed">{{ breed }}</option>
        </select>
        <label for="city">丢失城市:</label>
        <select v-model="newPetsData.city" id="city">
          <option value="北京">北京</option><option value="天津">天津</option><option value="上海">上海</option><option value="重庆">重庆</option>
          <option value="江苏">江苏</option><option value="浙江">浙江</option><option value="江西">江西</option><option value="黑龙江">黑龙江</option><option value="新疆">新疆</option>
          <option value="香港">香港</option><option value="澳门">澳门</option><option value="广东">广东</option><option value="广西">广西</option>
          <option value="湖南">湖南</option><option value="湖北">湖北</option><option value="辽宁">辽宁</option><option value="宁夏">宁夏</option>
          <option value="河南">河南</option><option value="河北">河北</option><option value="山东">山东</option><option value="山西">山西</option>
          <option value="内蒙古">内蒙古</option><option value="吉林">河北</option><option value="安徽">安徽</option>
          <option value="青海">青海</option><option value="甘肃">甘肃</option><option value="陕西">陕西</option>
          <option value="福建">福建</option><option value="海南">海南</option><option value="台湾">台湾</option><option value="海外">海外</option>
        </select>
        <label for="location">丢失地点:</label>
        <input v-model="newPetsData.location" id="location" type="text" />
        <label for="description">宠物描述:</label>
        <input v-model="newPetsData.description" id="description" type="text" />
        <label for="ownerName">发布人:</label>
        <input v-model="newPetsData.ownerName" id="ownerName" type="text" />
        <label for="contactInfo">联系电话:</label>
        <input v-model="newPetsData.contactInfo" id="contactInfo" type="text" />
        <div class="buttons">
          <button @click="saveNewPets">保存</button>
          <button @click="closeAddModal">取消</button>
        </div>
      </div>
    </div>
    <div class="add-admin">
      <button class="add-button" @click="openAddModal">+</button>
    </div>

  </div>
</template>

<script>
import { losspets, addLoss} from '../../api/user';
export default {

  data() {
    return {
      isLoading: false,
      searchQuery: '',
      selectedType: '',
      selectedCatBreed: '',
      selectedDogBreed: '',
      selectedOtherBreed: '',
      selectedLocation: '',
      filteredPets: [],
      selectedPet: null,
      showAddModal: false,
      newPetsData: {
        name: '',
        type: '宠物领养',
        breed: '',
        city: '北京',
        location: '',
        ownerName: '',
        description: '',
        contactInfo: ''
      },
      breeds: {
        dog: ['比熊', '泰迪', '博美','柴犬','柯基','金毛','边牧','松狮','巴哥','德牧','法斗','西高地','哈士奇','蝴蝶犬','约克夏','萨摩耶','雪纳瑞','马尔济斯','拉布拉多','阿拉斯加','其它'],
        cat: ['蓝白', '蓝猫', '纯白', '虎斑', '加白', '橘猫', '黑猫', '白猫','布偶', '缅因', '豹猫', '金渐层', '银渐层', '狸花猫', '奶牛猫', '三花猫', '波斯猫', '金吉拉', '拿破仑', '无毛猫', '矮脚猫', '暹罗猫', '德文卷毛', '美国卷耳', '挪威森林','其它'],
        other: ['兔','鸭','仓鼠','龙猫','鹦鹉','刺猬','小香猪','其它']},
      pets: []
    };
  },
  methods: {
    async getLostPet() {
      this.isLoading = true;
      const response = await losspets(
        this.searchQuery,
        this.selectedType,
        this.selectedLocation
      );
      console.log(response.data.data);
      this.pets = response.data.data;
    },
    addLosePet(){
      const response = addLoss(this.newPetsData);
      alert(response.data.msg);
    },

    

    openAddModal() {
      this.showAddModal = true;
    },
    openAddModal() {
      this.showAddModal = true;
    },
    closeAddModal() {
      this.showAddModal = false;
    },
    saveNewPets() {
      this.addLosePet();
    }
  },mounted() {
    this.getLostPet();
  },
  computed: {
  // 计算出符合条件的宠物数据
  filteredPets() {
    return this.pets.filter((pet) => {
      return (
        (!this.searchQuery || pet.name.includes(this.searchQuery)) &&
        (!this.selectedType || pet.type === this.selectedType) &&
        (!this.selectedCatBreed || pet.breed === this.selectedCatBreed) &&
        (!this.selectedDogBreed || pet.breed === this.selectedDogBreed) &&
        (!this.selectedOtherBreed || pet.breed === this.selectedOtherBreed) &&
        (!this.selectedLocation || pet.city === this.selectedLocation)
      );
    });
  },
  
  // 用于过滤宠物品种选项，确保新增丢失信息部分不会影响此部分
  filteredBreeds() {
    // 根据选中的宠物种类返回相应的品种列表
    if (this.newPetsData.type === '狗') {
      return this.breeds.dog;
    } else if (this.newPetsData.type === '猫') {
      return this.breeds.cat;
    } else if (this.newPetsData.type === '其它') {
      return this.breeds.other;
    }
    return [];
  },
},
};
</script>
  
  <style scoped>
  body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f7fa;
    margin: 0;
    padding: 0;
  }
  .losepet {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }
  .title {
    font-size: 36px;
    text-align: center;
    color: #4f8a8b;
    margin-bottom: 20px;
  }
  
  /* 筛选区 */
  .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
  }
  .filters .filters-dropdown {
    flex: 1 1 200px;
  }
  .filters input,
  .filters select {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border-radius: 6px;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  .filters input {
    border-color: #4f8a8b;
  }
  .filters select {
    background-color: #f9f9f9;
  }
  
  /* 宠物卡片 */
  .pet-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .pet-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  }
  .pet-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .pet-card-header h3 {
    font-size: 24px;
    color: #4f8a8b;
  }
  .pet-type {
    background-color: #e0f7fa;
    padding: 5px 10px;
    border-radius: 15px;
    color: #00796b;
  }
  .pet-card-body {
    margin-top: 10px;
  }
  .pet-card-body p {
    font-size: 16px;
    color: #555;
  }
  
  button {
    background-color: #4f8a8b;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 0 10px;
  }
  button:hover {
    background-color: #00796b;
  }

.add-admin {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
.add-button {
  background-color: #007bff; 
  color: white;
  border: none;
  border-radius: 50%; 
  width: 50px; 
  height: 50px; 
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.add-button:hover {
  background-color: #0056b3;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  width: 400px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.modal-content h3 {
  font-size: 22px;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}
.modal-content label {
  font-size: 14px;
  color: #555;
  margin-bottom: 5px;
  display: block;
}
.modal-content p {
    margin: 8px 0;
    text-align: left;
}
.buttons {
  margin-top: 20px;
}
.buttons button {
  margin-right: 10px;
}
  /* 响应式设计 */
  @media (max-width: 768px) {
    .filters {
      flex-direction: column;
    }
  
    .filters .filters-dropdown {
      flex: 1 1 100%;
    }
  
    .pet-card {
      padding: 15px;
    }
  }
  </style>